import { useEffect, useMemo, useState } from "react";
import { Button } from "../../components";
import useToggleMark from "../hooks/toggle-mark";
import { Dropdown, MenuProps } from "antd";
import { useSlate } from "slate-react";

const fontFamily=[
  {
    "key": "inherit",
    "label": "系统默认"
 },
  {
      "key": "Arial Black, sans-serif",
      "label": "Arial Black"
  },
 
  {
      "key": "SimHei, STHeiti, sans-serif",
      "label": "黑体"
  },
  {
      "key": "SimSun, STSong, serif",
      "label": "宋体"
  },
  {
      "key": "NSimSun, serif",
      "label": "新宋体"
  },
  {
      "key": "KaiTi, STKaiti, 'Kaiti SC', cursive",
      "label": "楷体"
  },
  {
      "key": "LiSu, STLiti, cursive",
      "label": "隶书"
  },
  {
      "key": "YouYuan, 'Yuanti SC', sans-serif",
      "label": "幼圆"
  },
  {
      "key": "Arial, sans-serif",
      "label": "Arial"
  },
  {
      "key": "'Arial Black', sans-serif",
      "label": "Arial Black"
  },
  {
      "key": "Calibri, sans-serif",
      "label": "Calibri"
  },
  {
      "key": "'Comic Sans MS', Monaco, sans-serif",
      "label": "Comic Sans MS"
  },
  {
      "key": "'San Francisco', sans-serif",
      "label": "San Francisco"
  },
  {
      "key": "sans-serif, Arial",
      "label": "Sans Serif"
  },
  {
      "key": "serif, TimesNewRoman",
      "label": "Serif"
  },
  {
      "key": "TimesNewRoman, 'Times New Roman', Times, serif",
      "label": "Times New Roman"
  },
  {
      "key": "Tahoma, sans-serif",
      "label": "Tahoma"
  },
  {
      "key": "'Trebuchet MS', sans-serif",
      "label": "Trebuchet MS"
  },
  {
      "key": "Verdana, sans-serif",
      "label": "Verdana"
  },
  {
      "key": "Georgia, serif",
      "label": "Georgia"
  },
  {
      "key": "Garamond, serif",
      "label": "Garamond"
  }
]
export default () => {
  const { toggleMark,markValue } = useToggleMark();
  const[value,setValue]=useState<string>('inherit');
  const editor = useSlate();

  const items = useMemo(() => {
    return fontFamily.map((item: any) => {
      return {
        key: item.key,
        label: <span style={{ fontFamily: item.key }}>{item.label}</span>
      };
    });
  }, []);

  const onClick: MenuProps['onClick'] = (e) => {
    setValue(e?.key)
    toggleMark("style-fontFamily", e?.key); 
  };

  useEffect(()=>{
      const fontFamily=markValue('style-fontFamily',value)
      
      if(editor.selection){
        setValue(fontFamily||'inherit');
      }
     
},[markValue]);

  const currnetLabel=useMemo(()=>{
    return fontFamily.find((item)=>item.key===value)?.label
  },[value])
 
  return (
    <Dropdown
      menu={{ items,onClick }}
      placement="bottom"
      autoAdjustOverflow
      arrow={{ pointAtCenter: true }}
    >
      <Button style={{width:80}} onClick={(e) => e.preventDefault()}>{currnetLabel}</Button>
    </Dropdown>
  );
};
